import { eventEnum } from '../constant/index';

export function drawLine(context, startPoint, endPoint, lineColor, lineWeight) {
	context.beginPath();
	context.moveTo(startPoint.x, startPoint.y);
	context.lineTo(endPoint.x, endPoint.y);
	context.strokeStyle = lineColor;
	context.lineWidth = lineWeight;
	context.lineCap = 'round';
	context.lineJoin = 'bevel';
	context.stroke();
}

export function drawCircle(context, x, y, radius, fillColor = 'black') {
	context.beginPath();
	context.fillStyle = fillColor;
	context.arc(x, y, radius, 0, Math.PI * 2);
	context.fill();
}

// export function clearArc(context, x, y, radius) {
// 	//(x,y)为要清除的圆的圆心，r为半径，cxt为context
// 	let stepClear = 1;
// 	clearArc(x, y, radius);

// 	function clearArc(x, y, radius) {
// 		var calcWidth = radius - stepClear;
// 		var calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth);

// 		var posX = x - calcWidth;
// 		var posY = y - calcHeight;

// 		var widthX = 2 * calcWidth;
// 		var heightY = 2 * calcHeight;

// 		if (stepClear <= radius) {
// 			context.clearRect(posX, posY, widthX, heightY);
// 			stepClear += 1;
// 			clearArc(x, y, radius);
// 		}
// 	}
// }

export function clearArc(context, canvas, startPoint, endPoint, eraserSize) {
	let asin =
		eraserSize * Math.sin(Math.atan((endPoint.y - startPoint.y) / (endPoint.x - startPoint.x)));
	let acos =
		eraserSize * Math.cos(Math.atan((endPoint.y - startPoint.y) / (endPoint.x - startPoint.x)));
	let x3 = startPoint.x + asin;
	let y3 = startPoint.y - acos;
	let x4 = startPoint.x - asin;
	let y4 = startPoint.y + acos;
	let x5 = endPoint.x + asin;
	let y5 = endPoint.y - acos;
	let x6 = endPoint.x - asin;
	let y6 = endPoint.y + acos;

	// 保证线条的连贯，所以在矩形一端画圆
	context.save();
	context.beginPath();
	context.arc(endPoint.x, endPoint.y, eraserSize, 0, 2 * Math.PI);
	context.clip();
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.restore();

	// 清除矩形剪辑区域里的像素
	context.save();
	context.beginPath();
	context.moveTo(x3, y3);
	context.lineTo(x5, y5);
	context.lineTo(x6, y6);
	context.lineTo(x4, y4);
	context.closePath();
	context.clip();
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.restore();
}

// 获取事件对应的坐标点（兼容移动端）
export function getPosition(e, isMobile) {
	return {
		x: isMobile ? e.targetTouches[0].pageX : e.clientX,
		y: isMobile ? e.targetTouches[0].pageY : e.clientY,
	};
}

export function saveImage(canvas) {
	let a = document.createElement('a');
	a.style.display = 'none';

	a.href = canvas.toDataURL();
	a.download = 'image';

	const event = new MouseEvent(eventEnum.CLICK);
	a.dispatchEvent(event);
}

export function pushInStack(stack, value, maxSize = 30) {
	if (stack.length === maxSize) {
		stack.shift();
	}
	stack.push(value);
}

export function getUserEvent() {
	const isMobile = eventEnum.ON_TOUCH_START in window;
	const tapStart = isMobile ? eventEnum.TOUCH_START : eventEnum.MOUSE_DOWN;
	const tapMove = isMobile ? eventEnum.TOUCH_MOVE : eventEnum.MOUSE_MOVE;
	const tapEnd = isMobile ? eventEnum.TOUCH_END : eventEnum.MOUSE_UP;
	return {
		isMobile,
		tapStart,
		tapMove,
		tapEnd,
	};
}

export function drawTriangle(context, canvas, isMobile, startPoint, endPoint, curImage, e) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.putImageData(curImage, 0, 0);

	endPoint = getPosition(e, isMobile);
	const diffx = endPoint.x - startPoint.x;
	context.lineWidth = 5;
	context.beginPath();
	context.moveTo(startPoint.x, startPoint.y);
	context.lineTo(endPoint.x, endPoint.y);
	context.lineTo(endPoint.x - 2 * diffx, endPoint.y);
	context.closePath();
	context.lineCap = 'round';
	context.lineJoin = 'bevel';
	context.stroke();
}

export function drawEmptyCycle(e, canvas, context, curImage, startPoint, endPoint, isMobile) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.putImageData(curImage, 0, 0);
	endPoint = getPosition(e, isMobile);

	const diffx = endPoint.x - startPoint.x;
	const diffy = endPoint.y - startPoint.y;

	const x = startPoint.x + diffx / 2;
	const y = startPoint.y + diffy / 2;

	const radius = (Math.sqrt(2) * diffx) / 2;

	console.log('diffx', diffx);
	console.log('diffy', diffy);

	context.beginPath();
	context.arc(x, y, radius, 0, Math.PI * 2, true); // 绘制
	context.stroke();
}

export function drawEmptySquare(e, canvas, context, curImage, startPoint, endPoint, isMobile) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.putImageData(curImage, 0, 0);
	endPoint = getPosition(e, isMobile);

	context.beginPath();
	context.moveTo(startPoint.x, startPoint.y);
	context.lineTo(endPoint.x, startPoint.y);
	context.lineTo(endPoint.x, endPoint.y);
	context.lineTo(startPoint.x, endPoint.y);
	context.lineTo(startPoint.x, startPoint.y);
	context.stroke();
}

export function drawEmptyhexagon(e, canvas, context, curImage, startPoint, endPoint, isMobile) {
	context.clearRect(0, 0, canvas.width, canvas.height);
	context.putImageData(curImage, 0, 0);
	endPoint = getPosition(e, isMobile);

	const diffy = endPoint.y - startPoint.y;
	const diffx = endPoint.x - startPoint.x;
	const halfDiffy = diffy / 2;
	const halfDiffx = diffx / 2;

	context.beginPath();
	context.moveTo(startPoint.x, startPoint.y);
	context.lineTo(endPoint.x, startPoint.y);
	context.lineTo(endPoint.x + halfDiffx, startPoint.y + halfDiffy);
	context.lineTo(endPoint.x, endPoint.y);
	context.lineTo(startPoint.x, endPoint.y);
	context.lineTo(startPoint.x - halfDiffx, startPoint.y + halfDiffy);
	context.lineTo(startPoint.x, startPoint.y);
	context.stroke();
}
